<template>
    <div class="appraise">


        <div class="langBox" @click="handleChangelang">
            <img v-if="lang == 'zh'" src="../../static/imgs/zha.png" class="changeImg" alt="">
            <img v-if="lang == 'en'" src="../../static/imgs/ena.png" class="changeImg" alt="">
        </div>

        <div v-if="inputFlag">
            <div v-if="pageData.state == 'valid'" class="contentBox">
                <!-- <div class="topBox">
                    <img src="../../static/imgs/left_b.png" style="width: 20px;height: 20px;" alt="" srcset="">
                </div> -->
                <div class="content_item">
                    <img src="../../static/imgs/true.png" style="width: 120px;height: 120px;" alt="" srcset="">
                    <div class="appraisetext">
                        {{ $t('assemble.系统鉴定为真') }}
                    </div>
                    <div class="codetext">
                        {{ $t('assemble.系统码') }}
                        ：{{ label_code }}
                    </div>
                </div>
                <div class="btnBox" @click="handleYzcode">
                    {{ $t('assemble.继续扫码') }}
                </div>
            </div>

            <div v-else class="contentBox">
                <!-- <div class="topBox">
                    <img src="../../static/imgs/left_b.png" style="width: 20px;height: 20px;" alt="" srcset="">
                </div> -->
                <div class="content_item">
                    <img src="../../static/imgs/false.png" style="width: 120px;height: 120px;" alt="" srcset="">
                    <div class="appraisetext">
                        {{ $t('assemble.系统鉴定为假') }}
                    </div>
                    <div class="codetext">
                        {{ $t('assemble.无效系统码') }}
                    </div>
                </div>
                <div class="btnBox" style="background-color: #DB1630;" @click="handleYzcode">
                    {{ $t('assemble.继续扫码') }}
                </div>
            </div>
        </div>


        <div v-else class="">

            <div class="inputBox">
                <input class="inputItem" v-model="label_code" type="text" :placeholder="$t('assemble.请输入防伪码')">
                <div class="btns" @click="handleauthCode">
                    {{ $t('assemble.点击完成验证') }}
                </div>
            </div>


        </div>



    </div>
</template>
<script>
import { authCode } from "../../utils/api"
export default {
    data() {
        return {
            lang: 'zh',
            showFlag: true,
            inputFlag: true,
            label_code: "",
            pageData: {},
        }
    },
    created() {
        this.$i18n.locale = 'zh'
        this.lang = 'zh'
        localStorage.setItem('langtype', 'zh')
        if (this.$route.query.c) {
            console.log("000000000", this.$route.query)
            this.label_code = this.$route.query.c
            this.inputFlag = true
            this.handleauthCode()
        } else {
            this.inputFlag = false
        }

    },
    mounted() {
    },
    methods: {
        handleChangelang() {
            if (this.$i18n.locale == 'en') {
                this.$i18n.locale = 'zh'
                this.lang = 'zh'
            } else {
                this.$i18n.locale = 'en'
                this.lang = 'en'
            }
            localStorage.setItem("langtype", this.$i18n.locale)
        },
        handleYzcode() {
            this.label_code = ""
            this.inputFlag = false
        },
        async handleauthCode() {
            console.log("label_code", this.label_code)
            let data = {
                label_code: this.label_code
            }
            let res = await authCode(data)
            console.log("验证", res)
            this.inputFlag = true
            this.pageData = res
        },
    }
}

</script>
<style scoped lang="scss">
.langBox {
    width: 100%;
    display: flex;
    align-items: end;
    margin: 30px;
}

.changeImg {
    width: 56px;
    height: 30px;
}

.inputBox {
    width: 300px;
    margin: 0 auto;
    margin-top: 200px;

    .inputItem {
        width: 300px;
        height: 40px;
        border-radius: 10px;
        border: none;
        border: 1px solid #999999;
        text-indent: 20px;
    }

    .btns {
        width: 100%;
        height: 40px;
        border-radius: 10px;
        text-align: center;
        line-height: 40px;
        margin-top: 100px;
        background-color: red;
        color: #ffffff;
    }
}

.appraise {
    width: 100%;

    .contentBox {
        width: 100%;

        .topBox {
            width: 100%;
            height: 80px;
            padding-left: 15px;
            box-sizing: border-box;
            line-height: 80px;
        }

        .content_item {
            text-align: center;
            margin-top: 40px;

            .appraisetext {
                font-weight: 600;
            }

            .codetext {
                color: #999999;
                font-size: 12px;
                margin-top: 10px;
            }
        }

        .btnBox {
            width: 300px;
            height: 45px;
            border-radius: 50px;
            background-color: #0CBD0C;
            text-align: center;
            line-height: 45px;
            color: #ffffff;
            margin: 70px auto;
        }


    }

}
</style>